<script setup>
import {computed, onMounted, reactive, ref, toRefs, watch} from "vue";
import * as echarts from 'echarts';
const props = defineProps({
	options: {
		type: Object,
		default() {
			return {}
		}
	},
	height: {
		type: Number,
		default: 300,
	},
	width: {
		type: Number,
		default: 100,
	}
})


const options = toRefs(props.options)


const width = computed(() => {
	if (props.width>100) {
		return `${props.width}px`
	} else {
		return '100%'
	}
})

const height = computed(() => {
	if (props.height>100) {
		return `${props.height}px`
	} else {
		return '100%'
	}
})

let chat = null;
const styles = reactive({
	value: {
		width,
		height,
	}
})

/*
* echarts大小重置
* */
const resize = () => {
	if (chat) {
		chat.resize()
	}
}

const echartsRef = ref(null)
onMounted(() => {
	const options = props.options
	const object = echarts.init(echartsRef.value, null)
	object.setOption(options)
	chat = object
})

watch(() => props.options, (value) => {
	console.log('valueChange', value)
	options.value= value
	chat.setOption(props.options)

}, {deep: true})
</script>

<template>
	<div class="echarts" :style="styles.value" ref="echartsRef"></div>
</template>

<style scoped>
.echarts {
	height: 300px;
}
</style>